<template>
  <div class="community">
    <div class="header">
      <van-field v-model="searchValue" placeholder="搜素你想搜索的内容" right-icon="location-o" />
    </div>
    <div class="body">
      <div class="today-study-recommend">
        <TodayStudyRecommend />
      </div>
      <div class="community-recommend-header">
        <div class="title">社区推荐</div>
        <div class="more">更多<van-icon name="ellipsis" /></div>
      </div>
      <div class="users-study-plan-list">
        <StudyPlanCard v-for="item in count" :key="item.id" :plan="item" />
      </div>
    </div>
  </div>
</template>

<script setup>
import TodayStudyRecommend from './components/TodayStudyRecommend.vue'
import StudyPlanCard from '@/components/StudyPlanCard.vue'
import { onMounted, ref, watch } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { getPlanListService } from '@/api/Community'

const { x, y } = useWindowScroll()
console.log(x.value, y.value)

watch(y, (newValue, oldValue) => {
  const threshold = 10 // 距离底部的阈值
  if (newValue >= document.body.scrollHeight - window.innerHeight - threshold) {
    // 执行加载更多操作
    console.log('加载更多')
    current.value++
    getPlanLIst(current.value)
    console.log(count.value)
  }
})
const count = ref([])
const current = ref(1)
const searchValue = ref('')

const getPlanLIst = async (current) => {
  const res = await getPlanListService(current)
  res.data.forEach((item) => {
    count.value.push(item)
  })
}

onMounted(() => {
  getPlanLIst(current.value)
})
</script>

<style lang="scss" scoped>
.community {
  height: 100vh;
  background-color: #edf8ff;

  .header {
    padding: 5px 12px;
    height: 42px;
    line-height: 42px;
  }

  .body {
    padding: 12px;
    .community-recommend-header {
      height: 42px;
      line-height: 42px;
      padding: 0px 5px;
      display: flex;
      justify-content: space-between;

      .more {
        font-size: 12px;
        color: gray;
      }
    }
  }
}

::v-deep.van-cell {
  border-radius: 14px;
  border: 2px solid #64c3ff;
  background-color: transparent !important;
}
.users-study-plan-list {
  background-color: rgba(0, 0, 0, 0);
}
</style>